<template>
  <view class="data-index fullpage-min bg-f5 body">
    <view class="main">
      <text-block @change="ajaxInit" :content="orderCountData"></text-block>

      <u-gap height="40"></u-gap>
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">{{
              locations.name + "水位平均统计|" + newDate
            }}</text>
          </view>
          <view class="right_btn">
            <view
              v-for="(item, index) in historyBtn"
              :key="index"
              :class="item.state ? 'active_btn' : ''"
              @click="changeHistoryBtn(item.type)"
              >{{ item.name }}</view
            >
          </view>
        </view>
        <view class="charts-box" style="height: 200px">
          <qiun-data-charts
            type="line"
            canvasId="finance_a"
            :disableScroll="true"
            :ontouch="true"
            :enableScroll="true"
            :canvas2d="isCanvas2d"
            :resshow="delayload"
            :opts="optsData"
            :chartData="orderData"
          />

          <!-- <qiun-data-charts type="line" :opts="opts" :chartData="orderData" /> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  waterLevelAjax,
  getWaterLlevel,
  realTimeWaterLevel,
} from "@/pages/data//api/index";
import store from "../../store/modules/user";
export default {
  created() {},
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    // 接收父页面数据
    eventChannel.on("parentEvent", (data) => {
      // console.log("来自父页面的数据:", data);
      let num = data.data.terminal_num;
      // console.log(60,data);
      this.locations.name = data.name;
      this.waterLevelInit(String(num));
    });
  },
  data() {
    return {
      orderData: {},
      ajaxData: [],
      tableData: [],
      isCanvas2d: this.$f.ISCANVAS2D,
      range: [],
      newDate: "",
      optsData: {},
      locations: {
        name: "财富码头", //统计表名称
        num: 2576484,
      },
    };
  },
  computed: {},
  mounted() {
    this.optsData = {
      // dataLabel:false,
      enableScroll: true, //开启滚轮
      xAxis: { disableGrid: true, itemCount: 6, scrollShow: true,scrollAlign:"right" },
      yAxis: { disableGrid: true },
      // yAxis: { disableGrid: true, data: [{ disabled: true }]  },
      extra: {
        line: {
          type: "curve",
          width: 2,
          activeType: "hollow",
          linearType: "custom",
        },
      },
    };

    //获取今天日期
    const now = new Date();
    const year = now.getFullYear(); // 年份，如 2025
    const month = now.getMonth() + 1; // 月份需加1（0-11 → 1-12）[4,5](@ref)
    const day = now.getDate();
    //接受今天日期
    this.newDate = year + "-" + month + "-" + day;
  },
  methods: {
    //异步水位数据
    async waterLevelInit(num) {
      let res = await waterLevelAjax({ deviceId: num || "2576485" });
      this.ajaxData = res[1].data.data.data;
      let huorList = this.gettimeAndData(this.ajaxData);
      this.setchartData(huorList);
    },
    setchartData(ajaxData) {
      let max = Math.max(...ajaxData.waterv1Data); // 最高水位
      let min = Math.min(...ajaxData.waterv1Data); // 最低水位
      this.orderData = {
        // categories: ["24号", "25号", "26号", "27号", "28号", "29号", "30号","1号", "22号", "23号", "4号", "5号", "6号", "7号",],
        categories: ajaxData.time,
        series: [
          {
            name: "水位/米",
            data: ajaxData.waterv1Data,
            // data: arr,
            // format: 'yAxisDemo1', // 关联自定义格式化函数
            type: "line",
            style: "curve",
            color: "#55ff00",
            unit: "",
          },
          {
            name: `最高水位:${max}`,
            data: [],
            // data: arr,
            // format: 'yAxisDemo1', // 关联自定义格式化函数
            type: "line",
            style: "curve",
            color: "#74beff",
            unit: "",
          },
          {
            name: `最低水位:${min}`,
            data: [],
            // data: arr,
            // format: 'yAxisDemo1', // 关联自定义格式化函数
            type: "line",
            style: "curve",
            color: "#74beff",
            unit: "",
          },
        ],
        yAxis: [
          {
            calibration: true,
            position: "left",
            title: "单位/元",
            titleFontSize: 12,
            unit: "",
            tofix: 0,
            min: 0,
            disableGrid: true,
          },
        ],
      };
    },
    ////处理时间和数据
    gettimeAndData(data) {
      //处理时间和保留2位小鼠
      data.forEach((item) => {
        let date = new Date(item.colltime * 1000); //校正时间s
        let hoursDate = date.getHours();
        let minutes = date.getMinutes();
        // 解决时间单0问题
        if (minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (hoursDate <= 9) {
          hoursDate = "0" + hoursDate;
        }
        item.time = hoursDate + ":" + minutes;
        item.data = item.waterv1 / 1000;
      });
      //提取数据
      let time = data.map((item) => item.time);
      let waterv1Data = data.map((item) => item.data.toFixed(2));

      return { time, waterv1Data };
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  background-color: $color-theme;
  margin: 0;
  padding-bottom: 20rpx;

  .main {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .right_btn {
      float: right;
      display: flex;
      color: #ccc;
      font-size: 22rpx;

      view {
        line-height: 50rpx;
        height: 50rpx;
        margin: 0 20rpx;
      }

      .active_btn {
        padding: 0rpx 20rpx;
        border: 1px solid #ccc;
        border-radius: 40rpx;
      }
    }

    .row_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;

      &::after {
        content: "";
        height: 0px;
        width: 92%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 0;
        border-top: 1px dashed #ccc;
      }
    }

    .the_title {
      display: flex;
      align-items: center;

      .left_title {
        display: flex;
        align-items: center;
      }

      .title_icon {
        background-color: #7e7e7e;
        height: 40rpx;
        width: 10rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .view_item {
      padding: 30rpx 20rpx;

      .title {
        text-align: left;
        margin-bottom: 30rpx;
        font-size: 40rpx;
      }
    }

    .progress_circle {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      height: 450rpx;

      .progress_block {
        width: 45%;
        border-radius: 20rpx;
        height: 180rpx;
        position: relative;
        overflow: hidden;

        .name {
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          top: 20rpx;
          left: 10rpx;
          max-width: 144rpx;
        }

        .value {
          color: #fff;
          font-size: 40rpx;
          position: absolute;
          top: 64rpx;
          left: 10rpx;
          max-width: 144rpx;
        }

        .circle {
          position: absolute;
          right: 8rpx;
          top: 16rpx;
        }

        .arcbar {
          position: absolute;
          right: -4rpx;
          top: 8rpx;
        }
      }

      .block_0 {
        background-color: #0fc3ff;
      }

      .block_1 {
        background-color: #ff6b8b;
      }

      .block_2 {
        background-color: #ffcb1d;
      }

      .block_3 {
        background-color: #3bdcaa;
      }
    }
  }
}

.user_info {
  padding: 80px 0rpx 40rpx 0;
}
</style>
